<!DOCTYPE HTML>
<!--
	Editorial by liwei
-->
<html>
<head>
    <title>${WEB_NAME!}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="${content.metaDescription!}" />
    <meta name="keywords" content="${content.metaKeywords!}" />
    <meta name="author" content="李维" />
    <link rel="icon" href="${CTPATH}/images/icon/favicon.ico" />
    <!--[if lte IE 8]><script src="${CTPATH}/assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" href="${CTPATH}/assets/css/main.css" />
    <!--[if lte IE 9]><link rel="stylesheet" href="${CTPATH}/assets/css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="${CTPATH}/assets/css/ie8.css" /><![endif]-->
    <!-- Scripts -->
    <script src="${CTPATH}/assets/js/jquery.min.js"></script>
    <script src="${CTPATH}/assets/js/skel.min.js"></script>
    <script src="${CTPATH}/assets/js/util.js"></script>
    <!--[if lte IE 8]><script src="${CTPATH}/assets/js/ie/respond.min.js"></script><![endif]-->
    <script src="${CTPATH}/assets/js/main.js"></script>
</head>

<body>

<!-- Wrapper -->
<div id="wrapper">

    <!-- Main -->
    <div id="main">
        <nav  class="menu show-in-phone hide-in-table">
            <ul id="menu-phone">
                <li class="bars"><a  class="fa fa-bars" onclick="lvbar()"></a></li>
                <#include "layout/menu.html"/>
            </ul>
        </nav>


        <div class="inner">

    <!-- 文章内容 -->
        <article class="text_content">
            <header class="main">
                <h1>${content.title!}</h1>
                <div class="author row uniform">
                    <div class="author_avatar  2u(xsmall)">
                        <@jp.users role="root">
                            <img src="${CPATH}${(me.avatar)!}" height="40px">
                        </@jp.users>
                    </div>
                    <div class="author_detail 10u">
                        <div>${content.nickame!}</div>
                        <script type="text/javascript">
                            var t ="${content.created}";
                            document.write(dateFormatByDatetime(t));
                        </script>
                    </div>
                </div>
            </header>
            <div class="text">
                ${content.text!}
            </div>
            <!-- 推荐文章-->
            <div id="recommend">
                <div class="img">
                    <img src="${CTPATH}/images/icon/recommend.png">
                </div>
                <div>
                    <@jp.recommendContent id="${content.id!}">
                    下一篇：<a href="${(next.url)!}">${(next.title)!}</a>
                    </@jp.recommendContent>
                </div>
            </div>

        </article>

    <!-- 发表评论-->
    <div class="section comment">
        <header>
            <span class="tag">
                <a href="javascript:void(0)">发表评论</a>
            </span>
        </header>
        <form method="post" action="http://${WEB_IP}:8080/comment/submit" id="send_comment">
            <input type="hidden" name="cid" value="${(content.id)!}">
            <input type="hidden" name="anchor" value="allComment">
            <input type="hidden" id="parent_id" name="parent_id">
            <div class="row uniform">
                <div class="4u 10u$(xsmall)">
                    <input type="text" name="author" value="" placeholder="怎么称呼" />
                </div>

                <div class="4u$ 10u$(xsmall)">
                    <input type="email" name="email" value="" placeholder="你的邮箱" />
                </div>
                <em>选择一个你喜欢的头像</em>
                <div class="12u 12u$(xsmall) avatar">
                    <input id="checked_avatar" name="user_id" hidden="hidden" value="99999">

                    <@jp.users pageSize="20" role="ceshi">
                    <#list users as user>
                    <img alt="${user.id!}" src="${user.avatar!}">
                </#list>
                </@jp.users>
                </div>
                <!-- Break -->
                <div class="8u$ 12u$(xsmall)">
                    <textarea name="text" placeholder="你的评论（必填）" rows="6" required="required"></textarea>
                </div>
                <!-- Break -->
                <div class="12u$">
                    <ul class="actions">
                        <li><input type="submit" value="提交" class="special" /></li>
                        <li><input type="reset" value="重置" /></li>
                    </ul>
                </div>
            </div>
        </form>
    </div>

    <div class="section allComment" >
        <@jp.commentPage pageSize="10">
        <#if page ??>
        <header>
            <span class="tag"><a href="javascipt:void(0)" name="allComment">全部评论：${page.totalRow!}条</a></span>
        </header>
        <div class="all_comment">
            <#list page.getList() as comment>
            <div class="row uniform comment">
                <div class="1u 3u(xsmall) 2u(medium) comment_avatar">
                    <img src="${CPATH}${comment.avatar!TPATH+'/assets/images/avatar.jpg'}" />
                    <!--<img class="avatar" height="100px" src="${CPATH}${comment.avatar!TPATH+'/assets/images/avatar.jpg'}" />-->
                </div>
                <div class="11u 9u(xsmall) 10u(medium) row uniform">
                    <div class="12u 12u(xsmall)">
                        <span class="comment_author">${comment.author!comment.nickname!comment.username!}</span>
                        <br>
                        <script type="text/javascript">
                            var t ="${comment.created}";
                            document.write(dateFormatByDatetime(t));
                        </script>
                    </div>

                    <#if comment.qc_content ??>
                    <div class="normal refrence_comment">
                        <a>回复&nbsp;<strong style="color: red;">${comment.qc_author!}</strong>&nbsp;的内容</a>
                        &emsp;&emsp;${comment.qc_content!}
                    </div>
                </#if>
                <div class="12u$ normal  comment_content">${comment.text!}</div>
            </div>
            <div class="2u$ -10u  reply">
                <a href="#send_comment" onclick="reply('${comment.id!}')">回复</a>
            </div>
        </div>
        </#list>
        </div>
        <#if (page.totalRow> 10 )>
        <ul class="x-page">
            <@pagination anchor="allComment">
            <#list pages as pi>
            <li class="${pi.style!}">
                <a href="${pi.url!}">${pi.text!}</a>
            </li>
            </#list>
            </@pagination>
        </ul>
        </#if>
        </#if>
        </@jp.commentPage>
    </div>
<br /><br />

</div>
</div>

<!-- Sidebar -->
<#include "layout/sidebar.html"/>
</div>

</div>

</body>
<script type="text/javascript">
    //TODO IE的兼容性待作
    $(function() {
        $(".avatar img").click(function() {
            $(this).siblings().css({
                "height": "3em",
                "-webkit-filter": "grayscale(1)"
            }); //将其他的图片大小置为正常
            $(this).css({
                "height": "4em",
                "-webkit-filter": "grayscale(0)"
            }); //选中的图片就加大一些
            var value = $(this).attr("alt");
            $("#checked_avatar").val(value); //选中的值放在隐藏输入框里
        });
    })
    $(function(){
        //当前访问的那个页面
        var page = $(".text_content .main h1").text();
        //判断浏览器是否支持cookie
        if (!navigator.cookieEnabled){
            page += "&cne=cookie_not_enable";
        }
        record(page);
    })
</script>
<script type="text/javascript">
    function reply(id) {
        $("#parent_id").val(id);
        $("#send_comment").show();
    }
</script>


</html>